<template>
  <div class="home">
    <Headers>
        <template #left>
            ⟨
        </template>
        <template #center>
            发票抬头
        </template>
    </Headers>
    <button @click="pushAdd">+ 新增发票抬头</button>
    <li class="tag" v-for="item, index in list" :key="item.id" @click="upd(item)">
        <div>
            <p>{{ item.name }}</p>
            <span>{{ item.type }}</span>
            <span>{{ item.default==0?'默认':'非默认' }}</span>
        </div>
        <span @click="del(item.id)">⟩</span>
    </li>
  </div>
</template>
<script setup lang="ts">
import Headers from '@/components/Headers.vue';
import { useRouter } from 'vue-router';
import { getList, getDel } from '../api/index';
import { onMounted,ref } from 'vue';
let router=useRouter()
let list=ref()
let pushAdd=()=>{
    router.push('/add')
}
onMounted(()=>{
    onList()
})
let onList=async()=>{
    let data=await getList();
    list.value=data
}
let del=async(id:number)=>{
    await getDel({id});
    onList()
}
let upd=async(item:any)=>{
    console.log(item);
    router.push({path:'/add',query:{data:JSON.stringify(item)}})
}
</script>

<style lang="scss">
.home{
    background-color: #f6f6f6;
    text-align: center;
    button{
        background-color: #fff;
        width: 94%;
        height: 40px;
        border-radius: 5px;
        margin-top: 20px;
        border: none;
        color: rgb(34,190,255);
    }
    .tag{
        display: flex;
        text-align: left;
        justify-content: space-between;
        margin: 0 auto;
        width: 94%;
        height: 50px;
        border-radius: 5px;
        margin-top: 10px;
        font-size: 14px;
        background-color: #fff;
        div{
            margin-left: 10px;
            span{
                width: 30px;
                font-size: 10px;
                height: 20px; 
                border: 1px solid #ccc;
                border-radius: 4px;
                margin-left: 10px;
                
            }
        }
        p{
            margin-bottom: 4px;
            margin-left: 10px;
        }
        span{
            margin-right: 10px;
        }
    }
}
</style>
